<template>
  <a-modal
    title="编辑帮助说明"
    :width="800"
    :visible="modalVisibal"
    @cancel="handleCancel"
    :destroyOnClose="true"
    :keyboard="false"
    :maskClosable="false"
    :closable="true"
    :centered="true"
    :z-index="99"
  >
    <div class="helpinstructions">
      <a-form-model
        layout="vertical"
        ref="formComp"
        :model="formData"
        :rules="rules">
        <a-row :gutter="[16, 0]" style="margin-bottom: 20px">
          <a-col :span="12">
            <a-form-model-item label="主题名称" prop="title">
              <a-input
                :placeholder="$t('pleaseInput') + '主题名称'"
                :maxLength="100"
                v-model="formData.title"
              />
            </a-form-model-item>
          </a-col>
        </a-row>
        <div v-if="isTinymce">
          <RichTextEditor placeholder="请输入帮助说明内容, 可根据需求调整内容格式 ..." v-model="formData.note"/>
        </div>
      </a-form-model>
    </div>
    <div slot="footer">
      <div>
        <a-button @click="handleCancel" type="primary" :ghost="true">{{ $t('cancel') }}</a-button>
        <a-button @click="handleSave" type="primary">保存并关闭</a-button>
      </div>
    </div>
  </a-modal>
</template>
<script>
  import RichTextEditor from '@comp/RichTextEditor'

export default {
  components: { RichTextEditor },
  computed: {
  },
  data () {
    return {
      formData: {
        title: '',
        note: ''
      },
      modalVisibal: false,
      isTinymce: false,
      rules: {
        title: [{ required: true, message: this.$t('pleaseInput') }]
      }
    }
  },
  watch: {
    modalVisibal: {
      handler (val) {
        if (this.modalVisibal) {
          this.$nextTick(() => {
            this.isTinymce = this.modalVisibal
          })
          this.getHelpInstructionsInfo()
        }
      },
      immediate: true
    }
  },
  mounted () {
  },
  methods: {
    // 获取帮助说明
    getHelpInstructionsInfo () {
      this.$api.getHelpInstructions().then((res) => {
        this.formData.note = res.data.note
        this.formData.title = res.data.title
      })
    },
    shutDown () {
      this.modalVisibal = !this.modalVisibal
    },
    // 取消
    handleCancel () {
      this.isTinymce = false
      this.shutDown()
    },
    // 保存
    handleSave () {
      this.$refs.formComp.validate((valid) => {
        if (valid && this.formData.note) {
          this.$api.addHelpInstructions(this.formData)
            .then(() => {
              this.isTinymce = false
              this.shutDown()
              this.$message.success(this.$t('successfullyOperation'))
            })
        } else if (!this.formData.note && valid) {
          this.$message.error('富文本编辑框不能为空')
        } else if (!valid && this.formData.note) {
          this.$message.error('主题名称不能为空')
        } else if (!this.formData.note && !valid) {
          this.$message.error('主题名称与富文本编辑框不能为空')
        }
      })
    }
  }
}
</script>
<style scoped lang="less">
  .helpinstructions {
    overflow-x: hidden;
    overflow-y: auto;
    height: 500px;
  }
  /deep/.ant-form-item {
    margin-bottom: 0;
  }
</style>
<style lang="less">
.tox-tinymce-aux {
  z-index: 709826033 !important;
}
</style>
